<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import {fetchUser, getUser} from "@/components/userInfo.js";
import {post} from "@/util/axios.js";

// watchEffect(() => {
//     localStorage.setItem('URL', JSON.stringify(getUser.value))
// })

const newUsername = ref()
const submit = () => {
    if (!newUsername.value) {
        ElMessage.warning('请输入新用户名')
        return
    }
    post('/user/updateUsername', {username: newUsername.value},async content => {
        await fetchUser()
        newUsername.value = ''
    })
}

</script>

<template>
    <div class="username-change-page">
        <h1>修改用户名</h1>

        <div class="form-group">
            <label>当前用户名</label>
            <div class="original-username">{{ getUser.username }}</div>
        </div>

        <div class="form-group">
            <label for="new-username">新用户名</label>
            <el-input
                id="new-username"
                v-model="newUsername"
                placeholder="在此处输入新用户名"
                clearable
            />
        </div>

        <el-button
            type="primary"
            @click="submit"
        >
            确认修改
        </el-button>
    </div>
</template>

<style scoped>
.el-input {
    height: 40px;
}
.username-change-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
    text-align: center;
}

h1 {
    margin-bottom: 30px;
    color: #333;
}

.form-group {
    margin-bottom: 20px;
    width: 100%;
    max-width: 300px;
}

label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #666;
}

.original-username {
    padding: 10px;
    background: #f5f7fa;
    border-radius: 4px;
    font-size: 16px;
}

.el-input {
    width: 100%;
}

.el-button {
    margin-top: 20px;
    width: 100%;
    max-width: 300px;
}
</style>